<template>
  <div :id="dataItem.id" class="relative flex flex-col card-wrapper">
    <div class="flex items-center title-wrapper">
      <span class="title" :style="cardTitleStyle">{{ dataItem.title }}</span>
      <slot name="header" />
    </div>
    <div class="container" :class="[dataItem.containerBg, containerClass]" @click="handleClick">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: 'card-wrapper',
  props: {
    dataItem: {
      type: Object,
      default: () => {}
    },
    value: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    cardTitleStyle() {
      switch (this.dataItem.title) {
        case '销售':
        case '发货':
        case '生产':
        case '领料':
        case '入库':
        case '来料检测':
        case '工单':
        case '采购':
        case '批次':
        case '生产信息':
          return {
            backgroundColor: '#3d82ea'
          }
        case '客诉':
        case '工序异常':
        case '设备异常':
        case '领料异常':
          return {
            backgroundColor: '#FE9F00'
          }
        case '出库':
        case '计划':
        case '关键物料绑定':
        case '同批次关联领料单':
          return {
            backgroundColor: '#C682EE'
          }
        case '整改':
          return {
            backgroundColor: '#64B5EA'
          }
        default:
          return {
            backgroundColor: '#3d82ea'
          }
      }
    },
    containerClass() {
      const { title } = this.dataItem
      switch (true) {
        case this.codeTypeTitleList[this.codeType].includes(title):
          return 'container-bg-white card-production-container'
        default:
          return ''
      }
    },
    codeType() {
      return this.$store.state.mind.codeType
    },
    codeTypeTitleList() {
      return {
        1: ['生产信息'],
        2: ['销售', '客诉', '出库', '生产信息']
      }
    }
  },
  methods: {
    cardContainerClass() {
      const { title } = this.dataItem
      switch (true) {
        case this.codeTypeTitleList[this.codeType].includes(title):
          return ''
        case ['客诉', '设备异常', '工序异常'].includes(title):
          return 'active-yellow'
        case ['出库', '计划', '关键物料绑定', '同批次关联领料单'].includes(title):
          return 'active-purple'
        case ['整改'].includes(title):
          return 'active-blue'
        default:
          return 'active-blue-deep'
      }
    },
    handleClick() {
      const payload = this.dataItem
      this.$store.commit('mind/setNodesActive', { payload, containerBg: this.cardContainerClass() })
    }
  }
}
</script>

<style lang="scss" scoped>
.card-wrapper {
  .title-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(-100%);
  }
  .title {
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 2px 2px 0 0;
    color: #fff;
  }
  .container {
    cursor: pointer;
    padding: 8px 16px;
    background-color: #ebf0f5;
    box-shadow: 0 8px 16px 1px rgba(11, 45, 97, 0.16);
    border: 1px solid #d3dfeb;
    &.active-blue-deep {
      background-color: #dbeaff;
      border-color: #3d82ea;
    }
    &.active-blue {
      background-color: #def2ff;
      border-color: #64b5ea;
    }
    &.active-yellow {
      background-color: #fff5e3;
      border-color: #fe9f00;
    }
    &.active-purple {
      background-color: #efe2f7;
      border-color: #c682ee;
    }
  }
  .container-bg-white {
    background-color: white;
  }

  .card-production-container {
    max-height: 366px;
    padding: 16px 0;
    overflow: hidden;
  }
}
</style>
